<template>
  <div class="address">
    <common-head title="联系人列表"></common-head>
    <div class="main">
      <div class="order-title"></div>
      <van-address-list
        v-model="address.choseId"
        :list="address.lists"
        @add="onAdd"
        @edit="onEdit"
        @select="select"
      />
    </div>
  </div>
</template>

<script>
import CommonHead from "components/CommonHead";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    select(ads) {
      // 调用设置 订单地址的mutations
      this.setAddress(ads);
      this.$router.push("/order");
    },
    onAdd() {
      this.$router.push("/addressAdd");
    },
    onEdit(n) {
      let index = this.address.lists.indexOf(n);
      this.$router.push(`/addressEdit/${index}`);
    },
    ...mapMutations(["setAddress"])
  },
  computed: {
    ...mapState(["address"])
  },
  components: {
    CommonHead
  }
};
</script>

<style lang="less" scoped>
.address {
  /deep/.van-nav-bar {
    background: #fff !important;
    .van-icon-arrow-left {
      color: #333 !important;
    }
    .van-nav-bar__title {
      color: #333 !important;
    }
  }
  .main {
    width: 100%;
    overflow: hidden;
    padding-top: 65px;
    padding-bottom: 50px;
    position: relative;
    z-index: 0;
    .order-title {
      position: absolute;
      width: 100%;
      z-index: -1;
      background-image: linear-gradient(
        90deg,
        #45dfab 0,
        #4addbd 70%,
        #4fdace 100%
      );
      color: #fff;
      height: 43px;
      padding: 0 14px 65px;
    }
    .van-address-list {
      margin: 56px 13px 13px;
      .van-cell {
        margin-bottom: 13px;
        box-shadow: 0rem 0rem 0.40740741rem 0rem rgba(204, 204, 204, 0.44);
        border-radius: 0.37037037rem;
        border-right: 8px;
      }
      .van-address-item__edit {
        font-size: 26px;
      }
    }
    .van-button--danger {
      background-image: linear-gradient(
        90deg,
        #45dfab 0,
        #4addbd 70%,
        #4fdace 100%
      );
      border-color: transparent;
    }
  }
}
/deep/.van-address-item .van-radio__icon--checked .van-icon {
  background-color: #45dfab !important;
  border-color: #45dfab !important;
}
</style>